<template>
<div>
  <div class="table-data" >
    <div v-show="tabShow">
      <div class="search-box">
      <!-- v-if="manage!='shop' && manage!='channel'" -->
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
      <el-input size="small" v-model="searchMap.order_sn" placeholder="订单编号"></el-input>
      <el-select v-model="searchMap.shipping_type" clearable placeholder="商品类型">
        <el-option label="物流商品" value="ship"></el-option>
        <el-option label="核销商品" value="code"></el-option>
      </el-select>
      <!-- <el-select v-model="searchMap.vendor_id" v-if="manage=='admin'" clearable placeholder="全部供应商">
        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select> -->
      <el-select v-model="searchMap.vendor_id" v-if="manage=='admin'" clearable placeholder="全部渠道">
        <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.shop_id" v-if="manage=='admin'" clearable placeholder="全部商家">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="订单状态">
        <el-option label="已取消" value="cancelled"></el-option>
        <el-option label="下单失败" value="fail"></el-option>
        <el-option label="待取消" value="wait_cancel"></el-option>
        <el-option label="已下单" value="created"></el-option>
        <el-option label="已支付" value="payed"></el-option>
        <el-option label="已发货" value="sent"></el-option>
        <el-option label="已签收" value="confirm"></el-option>
        <el-option label="退款中" value="refund"></el-option>
        <el-option label="退货中" value="sentback"></el-option>
        <el-option label="换货中" value="exchange"></el-option>
        <el-option label="已完成" value="completed"></el-option>
        <el-option label="已删除" value="deleted"></el-option>
        <el-option label="退款完成" value="refund_complete "></el-option>
        <el-option label="已使用" value="used"></el-option>
        <el-option label="待使用" value="wait_used"></el-option>
        <el-option label="待二次核销" value="wait_second"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">批量发货</el-button> -->
      <!-- <el-button size="small" type="primary" icon="el-icon-download" @click="handleSearch">导出excel</el-button> -->
    </div>


    <div class="manager-table" v-loading="loading" >
          <p v-if="tableData && tableData.length==0" style="text-align: center; line-height: 200px; font-size: 12px; color: #909399;">暂无数据</p>
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tbody v-for="(order,index) in tableData" :key="index" class="mt20">
              <tr bgcolor="#f4f4f4">
                <td colspan="2">
                  <div class="order-title">
                    <span>订单号：<a style="color:red">{{order.order_sn}}</a> </span>
                    <span>商户订单号：{{order.merchant_order_sn}} </span>
                    
                    <span>下单日期：{{order.pay_time}}</span>
                    <span>支付日期：{{order.create_time}}</span>
                    <span>{{order.merchant.name}}</span>
                    <span>{{order.shop.name}}</span>
                    
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>
                  <div class="onetd" v-for="(item,productIndex) in order.order_item" :key="productIndex" >
                    <div class="img">
                      <img :src="item.cover" width="60" height="60" />
                    </div>
                    <div class="con">
                      <p>{{item.goods_name}} </p>
                      <p>规格：{{item.spec_item}}</p>
                      <p>sku编码：{{item.sku}}</p>
                    </div>
                    <div class="pri">{{item.price}} &times; {{item.num}}</div>
                  </div>
                </td>
                <td>
                  <p>收货人：{{order.consignee}}</p>
                  <p>收货地址：{{order.address_full}}</p>
                  <p>收货电话：{{order.mobile}}</p>
                  <p>订单备注：{{order.remark?order.remark:"无"}}</p>
                  <p v-if="order.remark_template.length !== 0"><span>其他备注：</span><span v-for="(mItem,mIndex) in order.remark_template" :key="mIndex">{{mItem.name}} : {{mItem.value}} </span></p>
                </td>
                <td>
                  <div class="btn">
                    <p><router-link v-if="manage!='shop'" :to="{name:'orderDetail',query:{id:order.id}}" @click.native="handleDetail()" class="user-detail el-button el-button--primary el-button--mini">详情</router-link></p>
                    <p><el-button size="mini" v-if="order.status=='payed' && order.shipping_type == 'ship' && order.vendor_id == 1 && manage!='channel'" type="primary" @click.native="handleAdd(order)">发货</el-button></p>
                    <p><el-button size="mini" v-if="order.status=='sent'  && manage!='channel'" type="primary" @click="LogisticsorderNo(order.order_sn,order.extension)">物流单号</el-button></p>
                  </div>
                </td>
              </tr>
              <tr bgcolor="#f4f4f4">
                <td colspan="2">
                  <div class="order-title">
                    <span><a style="color:red">{{order.total_num}}</a> 件商品</span>
                    <span>总计：<a style="color:red">{{order.total}}</a></span>
                    <span>运费：<a style="color:red">{{order.shipping_fee}}</a></span>
                    <span>商品小计：<a style="color:red">{{order.product_fee}}</a></span>
                    <span><a style="color:red">{{order.shipping_type_txt}}</a></span>
                    <span><a style="color:red">{{order.status_txt}}</a></span>
                    <span><a style="color:red">{{order.pay_type_txt}}</a></span>
                    <span>{{order.vendor.name}}</span>
                    <span v-if="order.extension && order.extension.out_order_sn"><a style="color:red">{{order.extension.out_order_sn}}</a> </span>
                    
                  </div>
                  
                </td>
                <td></td>
              </tr>
              <tr style="height:20px;"></tr>
            </tbody>
          </table>
          <div class="pagination" v-if="tableData && tableData.length">
            <el-pagination @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10,30,50]"
              :page-size="size"
              layout="total,sizes,prev,pager,next,jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>

    </div>
  </div>
  <router-view @loadData="loadData"></router-view>
  <EditDialog :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" :key="timer" @loadData="loadData"></EditDialog>
</div>

</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import businessApi from "@/api/business";
import supplierApi from "@/api/supplier";
// import { State, Getter, Mutation, Action } from "vuex-class";
import orderApi from "@/api/order";
import bus from "@/api/busEvevt"
import channelApi from "@/api/channel";
import { Container } from 'element-ui';
@Component({
  components: {EditDialog }
})
export default class orderList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() Height:any=''
  @Provide() tableData: any = []; // 表格数据
  @Provide() newTableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() supplierList: any=[];//供应商列表
  @Provide() channelList: any=[];//渠道列表
  @Provide() businessList: any=[];//商家列表
  @Provide() state: boolean = true; // 黑白名单状态
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() orderInfo: any = []; 
  @Provide() timer: any = '';
  @Provide() searchMap:{
    keyword: string,
    order_sn: string,
    shipping_type:string,
    vendor_id:any,
    shop_id:any,
    status:string,
  }={
    keyword: "",
    order_sn: "",
    shipping_type:"",
    vendor_id:"",
    shop_id:"",
    status:"" ,
  }
  @Provide() searchMapC:{
    type: any,
    name:any,
  }={
    type: '',
    name:''
  }
  @Provide() searchMapS:{//供应商查询条件
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() formData:any={
    id:"",
    shipping_company:"",
    shipping_no:""
  }
  @Provide() manage: any = '';//管理员
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/orderList'){
      this.tabShow=this.tabVisible;
    }
  }
  handleDetail(){
    this.tabShow=false
  }
  // 发货
  handleAdd(data){
    this.formData.id=data.id
    this.isAdd=true;
    
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
  }
  created() {
    if(this.$route.query.vendor_id!=undefined) {
      this.searchMap.vendor_id = this.$route.query.vendor_id
    }
    this.Height=document.body.offsetHeight - 323
    this.loadData();
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    if(this.$route.path!='/orderList'){
      this.tabShow=false
    }
    if(this.manage=='admin'){
      // 商家
      businessApi.businessList(1,999999,this.searchMapB)
        .then((res: any) => {
          this.businessList = res.data.data.list;
      });
      // 供应商
      supplierApi.supplierList(1,999999,this.searchMapS)
        .then((res: any) => {
          this.supplierList = res.data.data.lists.data;
      });
      // 供应商
      channelApi.channelList(1,999999,this.searchMapC)
      .then((res: any) => {
          this.channelList = res.data.data.list;
      })
    }
  }
  mounted(){
    //接收兄弟传值
    bus.$on('vendorId',(msg) => {
      this.searchMap.vendor_id = msg
    })
  }
  loadData() {
    setTimeout(() => {
      orderApi.orderList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.loading=false
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        if(this.tableData){
          res.data.data.list.forEach((items:any)=>{
            items.order_item.forEach((item:any)=>{
              item.count=items.order_item.length
            });
            this.orderInfo.push(items.extension ? items.extension.shipping_company : []);
          })
        };
      });
    }, 500);
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
  
  //物流单号
  LogisticsorderNo(ordernum,logistics) {
     const h = this.$createElement;
        this.$msgbox({
          title: '物流信息',
          message: h('div', [
            h('p', '物流公司： ' + logistics.shipping_company),
            h('p', '快递单号  :  ' + logistics.shipping_no )
          ]),
          showCancelButton: false,
          confirmButtonText: '确定',
          beforeClose: (action, instance, done) => {
            done();
          }
        })
  }
  //推送订单
  orderpush(msg:any) {
    let data = {
      id:msg
    }
    
    this.$confirm("确认推送吗?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderApi.pushordertosupplier(data)
          .then((res:any)=>{
            if(res.data.status){
              this.$message({
              message: '操作成功',
              type: "success"
              });
              this.$emit("closeDialog");
              this.$emit("loadData")
            }else{
                this.$message({
                message: res.data.msg,
                type: "error"
                });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
  }
  //取消订单
  cancellationoforder(id:any) {
    let data= {
      id: id
    }
    orderApi.cancelsupplierorder(data)
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
  }
}
</script>

<style lang="scss" scoped="scoped">
  
    .manager-table {
      padding: 20px;
      background: #ffffff;
      	.allSelect {
				padding: 10px;
				line-height: 50px;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
				font-size: 14px;
				color: #666;
			}
			table tr:first-child {
				background-color: #f5f7fa;
			}
			table tr:last-child:hover {
				background-color: #f5f7fa;
			}
			table tr {
				line-height: 24px;
			}
			table tr td {
				padding: 10px;
				border: solid #ebeef5;
				border-width: 1px 1px 1px 0px;
			}
			table tr td:last-child {
				border-right: none;
			}
			.order-title span {
				margin-right: 30px;
			}
			.onetd {
				display: flex;
				justify-content: space-around;
				margin-top: 10px;
			}
			.con {
				width: 60%;
				min-width: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.btn {
				text-align: center;
			}
			.btn p {
				margin: 10px auto;
			}
    }
    .pagination {
      padding: 10px 0;
      overflow: hidden;
    }
    .el-pagination {
      float: right;
    }
    .mt20{
      margin-top: 20px;
    }
</style>